<template>
  <div class="Echarts">
    <el-row style="margin: 10px 0px 10px 20px">
        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
          <el-date-picker
            v-model="daterangeOrderDate"
            size="small"
            style="width: 300px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="selDateCount"
          ></el-date-picker>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
          <el-select v-model="params.typeId" @change="typeSelChange">
            <el-option
              v-for="dict in typeIds"
              :key="dict.ids"
              :label="dict.name"
              :value="dict.id"
            ></el-option>
          </el-select>
        </el-col>
    </el-row>    
    <div id="main" style="width: 100%;height:500px;margin-left:15px;"></div>
    <el-table v-loading="loading" :data="totalData">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="商机阶段" align="center" prop="name" />
      <el-table-column label="商机金额(元)" align="center" prop="value"/>
      <el-table-column label="商机数" align="center" prop="busCount"/>
    </el-table>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { funnelCount } from "@/api/crm/index";
import { getAllListType } from "@/api/crm/busstage/type";

export default {
  name: 'funnelChart',
  data(){
    return {
      totalData: [],
      chart: null,
      // 遮罩层
      loading: true,
      params: {startDate: '', endDate: '', typeId: null},
      daterangeOrderDate: [],
      //商机阶段分类
      typeIds: []
    }
  },
  created() {
    getAllListType().then(response => {
      this.typeIds = response.data;
      if(this.typeIds.length > 0){
        this.params.typeId = this.typeIds[0].id;
      }
    })
  },
  methods:{
    //根据阶段分类id获取所有阶段
    typeSelChange(){
      
    },
    //时间修改后查询
    selDateCount(){
      if(null != this.daterangeOrderDate){
        this.params.startDate = this.daterangeOrderDate[0];
        this.params.endDate = this.daterangeOrderDate[1];
      }else{
        this.params.startDate = '';
        this.params.endDate = '';
      }
    },
    initChart() {
      this.chart = echarts.init(document.getElementById('main'));
      this.setOptions(totalData);
    },
	  setOptions(totalData){
      this.chart.setOption({
			  title: {
          text: '销售漏斗'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} 元'
        },
        series: [
          {
            name: '商机阶段',
            type: 'funnel',
            left: '10%',
            top: 60,
            bottom: 60,
            width: '80%',
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            gap: 2,
            label: {
              show: true,
              position: 'inside',
              formatter: '{b} : {c} 元'
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: 'solid'
              }
            },
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1
            },
            emphasis: {
              label: {
                fontSize: 20
              }
            },
            data: totalData
          }
        ]
		  })
		},
    selSaleQuotaCount(params, typeId){
      funnelCount(params).then(response => {
        this.totalData = response.data;
        this.loading = false;
        this.setOptions(this.totalData)
      });
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    })
  },
  watch: {
      //值改变时触发
      params: {
      　　handler(newValue, oldValue) {
            if(newValue.typeId != null){
              this.selSaleQuotaCount(this.params);
            }
      　　},
          deep: true,
      　　immediate: true
      }
  }
}
</script>

<style>

</style>